Skip to main content

String line schedule

A String line schedule is a type of line chart that illustrates a schedule vertically.

Properties​

Data​

Data Type​

There are 2 data formats available

  • JSON - this format provides slightly improved performance, but it's not recommended for workflow steps. This format takes following array of objects (more on that below):
{
  "id": 24,
  "name": "65515f1357c92",
  "color": "#ACD12D",
  "points": [
      {
          "idx": "2",
          "time": 1702358577.67034,
          "lineWidth": 3
      },
  ]
}
  • SDD - this is official format used within Dais. Due to flat structure it will be slightly less performant but working with workflow steps is a breeze.

Data​

The chart takes the following columns:

Common between formats:

  • id - unique value, used to identify elements
  • color - HTML compatible color of the line

Unique for JSON:

  • points - an array of objects with properties from list below. These objects define consecutive points from which string-line consists
  • points.group - series group (Y axis 0 level depth)
  • points.station - series station (Y axis 1 level depth)
  • points.time - timestamp when the point happens (X axis)
  • points.lineWidth - line thickness (px)
  • points.lineSyle - line style (normal or dashed)

Unique for SDD:

  • name - used to join points to create a line. All points with same name will be joined to create a line
  • group - series group (Y axis 0 level depth)
  • station - series station (Y axis 1 level depth)
  • time - timestamp when the point happens (X axis)
  • lineWidth - line thickness (px)
  • lineSyle - line style (normal or dashed)

To summarise - JSON nests the points within points property, where SDD has to repeat the name value for each object.

Point Data​

Outside of showing string-lines this chart also allows rendering points and ranges (dots and rectangles).

Point data is an SDD taking following properties:

  • id - unique identifier of the element
  • group - series group (Y axis 0 level depth)
  • station - series station (Y axis 1 level depth)
  • type - point or range - renders data as dot or rectangle respectively
  • time - for point, it's location on X axis; for range, it's a start of the event
  • duration - for range type only. Defines how long the event is

Series Data​

Defines Y axis series. Y Axis has 3 levels - family -> group -> series. It's an array of objects with following properties:

  • family - major section consisting of groups
  • group - sub major section consisting of series, can be omitted
  • serie - smallest chunk, typical category value
  • sub -subtext to be rendered right hand of series name

Add/Remove​

Add Mode​

Controls the status of the chart. Available statuses are:

  • { mode: 'normal' } this status means that chart allows typical interaction with the chart
  • { type: 'add', props: { type: 'point', label: 'hello' } } - this status sets the chart in add mode. This means that after clicking wherever within x and y-axis (not on the axes themselves) it will create element of type point with label hello and x and y position (time and series) of the pointer. The props follow the same pattern as additional data. That means you can also limit one of the axes to fixed value. I.e. props: { type: 'point', group: 'A', series: 'B} means that no matter where user click on the chart, the element will be added to group A, series B and the only thing controlled by pointer position is time axis (this also works the other way around).

Render​

Row height​

Controls the height of a single row

Line smoothing​

Controls path drawing algorithm. Currently, there are two options available:

  • linear - draws straight lines between provided points. It's very accurate.
  • smoothed - uses cubic spline that preserves monotonicity in X. In other words - horizontal lines maintain horizontal accuracy, vertical lines are less accurate but smoothed.

Current Time​

Renders a tick representing current user time

Line color​

Color of the tick line

Line style​

Type of the tick line. Either dashed or solid.

Line width​

Thickness of the line

Show​

Whether the current time should be shown or not

Tooltips​

Enabled​

Enable or disable tooltips for all data points

Config​

Format for a simple tooltip. Specify a suffix or prefix and set the decimal places.

{
  "prefix": "",
  "suffix": "",
  "multiplier": "auto",
  "decimalPlaces": 1,
  "capitalize": true,
  "useLocale": true
}

Column Config​

Construct a custom tooltip by combining data from columns in the source data.

Column​

Column from the data source to display in the tooltip.

Label​

Alias to display instead of the column name.

Apply to all series​

Should this column tooltip be displayed for all series?

Applies To Series​

Which series should this tooltip schema apply to.

Prefix​

Tooltip prefix.

Suffix​

Tooltip suffix.

Is Numeric​

Is the tooltip numeric? If yes, hide the properties related to numeric tooltips.

Multiplier​

Converts the value to the chosen multiplier. For example, the option "Thousands" would convert the value "1000" to "1k".

Decimal Points​

Decimal points to add to the number.

Capitalized multiplier​

Capitalizes the multiplier value.

Font Size​

Defines font size of the tooltip

Category Axis​

Enable Scroll​

Enables scroll on category axis (vertical)

Font size​

Font size of axis labels

Show lines​

Whether helper horizontal lines should be shown

Time Axis​

Enable Scroll​

Enables scroll on time axis (horizontal)

Font size​

Font size of axis labels

Show weeks​

Should week row be shown on time axis

Show hours​

Should hours row be shown on time axis

Show day names​

Should day names be shown on time axis

Show days​

Should days row be shown on time axis

Selection​

Selected elements​

Storage to contain info on selected elements. Works best when linked to the store.

Keys​

  • id - unique value that identifies elements
  • name - human-readable identifier
  • color - rendering color
  • group - category axis group property (level 1)
  • station - category axis station property (level 2)
  • time - Unix timestamp of the event
  • lineStyle - line styling option (normal or dashed)
  • lineWidth - thickness of the line
  • family - category axis family property (level 0)
  • sub - sub text for series
  • size - dot radius
  • duration - length of the event
  • label - element label to render
  • type - type of the element